<template>
  <div id="main" class="text"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { RequestShopDataMes } from "@/api/path/index.js";
const shopId = localStorage.getItem("ShopId");
const xAxis = ref<any>([]); //横坐标
const seriesData = ref<any>([]); //销售额
const echartsWidth = ref("");
const echartsHeight = ref("");
const emit = defineEmits(["widthWight"]);
onMounted(async () => {
  const a = await RequestShopDataMes();
  // followCountInfo关注人数
  // salesInfo销售额
  console.log("获取数据", a.resultObj);
  for (let i = 0; i < a.resultObj.monthlySales.length; i++) {
    xAxis.value[i] = a.resultObj.monthlySales[i].key;
    seriesData.value[i] = a.resultObj.monthlySales[i].data;
  }
  var myChart;
  console.log("echarts echarts echarts echarts echarts", myChart);
  var chartDom = document.getElementById("main");
    echartsWidth.value = chartDom!.offsetWidth + "px";
    echartsHeight.value = chartDom!.offsetHeight + "px";
  myChart = echarts.init(chartDom);

  var option;
  option = {
    color: ["#80FFA5"],

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#369BFF",
        },
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "1%",
      top: "6%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xAxis.value,
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "销售额",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 1,
          color: "#369BFF",
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(133, 197, 250, 0.2)",
            },
            {
              offset: 1,
              color: "rgb(133, 244, 250,0)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: seriesData.value,
      },
    ],
  };
  option && myChart.setOption(option);
  console.log(echartsWidth.value);
  console.log(echartsHeight.value);

  emit("widthWight", echartsWidth.value, echartsHeight.value);
});
</script>

<style scoped>
.text {
    min-width: 800px;
  width: 100%;
  height: 250px;
}
</style>
